import PropTypes from "prop-types"
import React, { memo, useCallback, useState } from "react"
import { SectionV2Wrapper } from "./style"
import SectionHeader from "@/components/section-header"
import SectionTabs from "@/components/section-tabs"
import SectionRooms from "@/components/section-rooms"
import SectionFooter from "@/components/section-footer"

const HomeSectionV2 = memo((props) => {
    const { infoData } = props
    /* 定义内部store */
    const initialName = Object.keys(infoData.dest_list)[0]
    // useState 只有在组件重新渲染时才会改变
    const [tabName, setTabName] = useState(initialName)

    /* 数据转换 */
    const tabNames = infoData.dest_address?.map((item) => item.name)

    const handleTabClick = useCallback(function (name) {
        setTabName(name)
    }, [])
    return (
        <SectionV2Wrapper>
            <SectionHeader title={infoData.title} subtitle={infoData.subtitle} />
            <SectionTabs tabNames={tabNames} tabClick={handleTabClick} />
            <SectionRooms roomList={infoData.dest_list?.[tabName]} itemWidth={"33.333333%"} />
            <SectionFooter name={tabName} />
        </SectionV2Wrapper>
    )
}) 

HomeSectionV2.propTypes = {
    infoData: PropTypes.object,
}

export default HomeSectionV2
